<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        background: none;
      }
      #components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}

    </style>
    <script>
      // sync parent style generated by style-loader into iframe
      if (parent.location.port) {
        [].forEach.call(parent.document.getElementsByTagName('head')[0].querySelectorAll('style'), function(node) {
          document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      } else {
        // append parent stylesheet
        [].forEach.call(parent.document.querySelectorAll('link[rel=stylesheet]'), function(node) {
          node && document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      }
    </script>
  </head>
  <body>
    <div id="components-layout-demo-fixed"></div>
    <script>
      function require(module) {
        if (module === 'react-router') {
          return window.ReactRouter;
        }
        if (module === 'react-router-dom') {
          return window.ReactRouterDOM;
        }
        return window.parent[module];
      }
      var mountNode = document.getElementById('components-layout-demo-fixed');
      var React = require('react');
      var ReactDOM = require('react-dom');
    </script>
    
    <script>
      function bishengPluginReactPreviewer() {
  var React = require("react");

  var ReactDOM = require("react-dom");

  var _antd = require("antd");

  var Header = _antd.Layout.Header,
      Content = _antd.Layout.Content,
      Footer = _antd.Layout.Footer;
  return /*#__PURE__*/React.createElement(_antd.Layout, null, /*#__PURE__*/React.createElement(Header, {
    style: {
      position: 'fixed',
      zIndex: 1,
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "logo"
  }), /*#__PURE__*/React.createElement(_antd.Menu, {
    theme: "dark",
    mode: "horizontal",
    defaultSelectedKeys: ['2']
  }, /*#__PURE__*/React.createElement(_antd.Menu.Item, {
    key: "1"
  }, "nav 1"), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
    key: "2"
  }, "nav 2"), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
    key: "3"
  }, "nav 3"))), /*#__PURE__*/React.createElement(Content, {
    className: "site-layout",
    style: {
      padding: '0 50px',
      marginTop: 64
    }
  }, /*#__PURE__*/React.createElement(_antd.Breadcrumb, {
    style: {
      margin: '16px 0'
    }
  }, /*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, null, "Home"), /*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, null, "List"), /*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, null, "App")), /*#__PURE__*/React.createElement("div", {
    className: "site-layout-background",
    style: {
      padding: 24,
      minHeight: 380
    }
  }, "Content")), /*#__PURE__*/React.createElement(Footer, {
    style: {
      textAlign: 'center'
    }
  }, "Ant Design \xA92018 Created by Ant UED"));
}
    </script>
    <script>
      var ReactDOM = require('react-dom');
      var app = bishengPluginReactPreviewer();

      if (true) {
        var container = null;
        app = React.createElement(
          require('antd').ConfigProvider,
          {
            getPopupContainer() { return container; },
          },
          [
            React.cloneElement(app, { key: 'AppContent' }),
            React.createElement('div', {
              key: 'InjectProviderHolder',
              ref(node) { container = node; },
            }),
          ],
        );
      }

      ReactDOM.render(app, mountNode);
    </script>
    <script src="https://unpkg.com/theme-switcher/dist/index.min.js"></script>
    <script>
      var timestamp = new Date().getTime();
      // handle message with parent
      function handleMessage(evt) {
        try {
          var result = JSON.parse(event.data);
          switch (result.action) {
            //
            case 'change.theme': {
              var themeData = result.data;
              var theme = themeData.theme;
              var themeConfig = themeData.themeConfig;
              if (window.ThemeSwitcher) {
                var themeSwitcher = window.ThemeSwitcher(themeConfig);
                themeSwitcher.switcher({
                  theme: theme,
                  useStorage: false,
                });
              }
              break;
            }
            default: {}
          }
        } catch (_) {
          console.error('[Demo] handleMessage error', _);
        }
      }

      window.addEventListener('message', handleMessage, false);
    </script>
  </body>
</html>
